<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      lang="zh-cn">
<head>
    <meta content="云之讯,云通讯,云通讯平台" name="keywords"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>短信平台运营系统 - 管理员中心</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link th:href="@{/resources/css/bootstrap.min14ed.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{/resources/css/plugins//sweetalert/sweetalert.css}" rel="stylesheet">

    <link th:href="@{/resources/css/font-awesome.min93e3.css?v=4.4.0}" rel="stylesheet"><!-- jqgrid-->
    <link th:href="@{/resources/js/plugins/jqgrid/css/ui.jqgrid-bootstrap.css}" rel="stylesheet">
    <link th:href="@{/resources/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/resources/css/style.min862f.css?v=4.1.0}" rel="stylesheet">
    <link th:href="@{/resources/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">

    <style>
        /* Additional style to fix warning dialog position */
        #alertmod_table_list_2 {
            top: 900px !important;
        }

        .grid-search {
            overflow: hidden;
            background-color: #FFF;
            border-top: 1px solid #DDD;
            padding: 10px 0;
        }

        .grid-search form {
            float: right;
            margin-right: 20px;
        }
    </style>
</head>
<body class="gray-bg">
<div th:replace="stat :: statCode"></div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="" id="agentTab" th:if="${menus.zkgl}">
                        <a href="/accountInfo/directclient/query">直客管理</a>
                    </li>
                    <li class="" th:if="${menus.dlszkhgl}">
                        <a href="/accountInfo/client/query" id="tab-2">子账户管理</a>
                    </li>
                    <li class="active" th:if="${menus.khzgl}">
                        <a data-toggle="tab" href="#tab-3" id="tab-3" aria-expanded="true">客户组管理</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" th:if="${menus.khzgl}">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="ibox ">
                                        <div class="ibox-content">
                                            <form role="form" class="form-inline" id="mainForm">
                                                <div class="form-group">
                                                    <!-- <label for="example1" class="sr-only">用户名</label> -->
                                                    <input type="text" placeholder="客户组名称/客户ID" id="accountGname"
                                                           name="accountGname" class="form-control" style="width:280px">
                                                </div>
                                                <div class="form-group">
                                            <span>&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-danger"
                                                                      onclick="search()">搜索</button></span>
                                                    <span>&nbsp;&nbsp;<a href="/accountInfo/clientgroup/add"
                                                                         class="btn btn-sm btn-primary">新增客户组</a></span>
                                                </div>

                                            </form>
                                        </div>

                                        <div class="ibox-content">
                                            <div class="jqGrid_wrapper">
                                                <table id="table_list"></table>
                                                <div id="pager_list"></div>
                                            </div>
                                            <p>&nbsp;</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="ibox-content">
                            <div class="jqGrid_wrapper">
                                <table id="table_list"></table>
                                <div id="pager_list"></div>
                            </div>
                            <p>&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/resources/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/resources/js/bootstrap.min.js?v=3.3.6}"></script>
<script th:src="@{/resources/js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/i18n/grid.locale-cn.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/jquery.jqGrid.min.js}"></script>
<script th:src="@{/resources/js/content.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/plugins/sweetalert/sweetalert.min.js}"></script>

<script th:src="@{/resources/js/date_format.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/common.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/layer/layer.js}"></script>

<script th:inline="javascript">

    function search() {

        $("#table_list").jqGrid('setGridParam', {
            datatype: 'json',
            postData: {
                accountGname: $("#accountGname").val(),
            }, //发送数据
//            page:1
        }).trigger("reloadGrid"); //重新载入
    }


    $(document).ready(function () {
        $.jgrid.defaults.styleUI = "Bootstrap";
        $("#table_list").jqGrid({
            url:/*[[@{/accountInfo/clientgroup/list}]]*/,
            mtype: 'POST',
            datatype: "json",
            jsonReader: {
                root: "data",
                page: "currentPage",
                total: "totalPage",
                records: "totalCount"
            },
            height: 'auto',
            rownumbers: true,
            autowidth: true,

            autoScroll: true,

            rowNum: 20,
            rowList: [10, 20, 30, 50],
            colNames: ["客户组名称", "客户组内客户（显示客户ID）", "创建时间", "操作"],
            colModel: [
                {name: "accountGname", align: "left", sortable: false},
                {name: "groupClients", align: "left", sortable: false},
                {name: "createTime", align: "left", sortable: false},
                {
                    name: "total", index: "total", align: "left", sortable: false, title: false,
                    formatter: function (cellvalue, options, rowObject) {

                        var accountGid = rowObject.accountGid;
                        var name = rowObject.accountGname;
                        var switcher = '';
                        //5:冻结 ; 1:解冻; 6:注销
                        switcher = "<button type='button' class='btn btn-link btn-xs ' onclick=\"edit('" + accountGid + "')\" title='编辑'>编辑</button><button type='button' class='btn btn-link btn-xs ' onclick=\"del('" + accountGid + "','" + name + "')\" title='删除'>删除</button>";
                        return switcher;
                    }
                }
            ],
            pager: "#pager_list",
            viewrecords: true,
            hidegrid: false
        });


        function keyUp(e) {
            var currKey = 0, e = e || event;
            currKey = e.keyCode || e.which || e.charCode;
            var keyName = String.fromCharCode(currKey);
            if (currKey == 13) {
                search();
            }
        }

        document.onkeyup = keyUp;

    });


    function edit(id) {
        var viewUrl = /*[[@{/accountInfo/clientgroup/edit}]]*/;
        window.location.href = viewUrl + "?accountGid=" + id;
    }


    function del(id, name) {
        if (!id) {
            return
        }
        swal({
            title: "您确定要删除客户组【" + name + "】",
            text: "",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "确定",
            cancelButtonText: "让我再考虑一下…",
            closeOnConfirm: false
        }, function () {
            $.ajax({
                url: '/accountInfo/clientgroup/delete/' + id,
                type: "POST",
                success: function (data) {
                    if (data.code != 0) {
                        swal("失败！", data.msg, "error");
                        return
                    }
                    swal("成功！", data.msg, "success");


                    search();
                }
            });
        });
    }

    /*]]>*/
</script>
</body>
</html>